<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>壁纸APP - 分类页面</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }

        /* 顶部标题栏 */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 44px;
            background: #fff;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            z-index: 100;
        }

        .header h1 {
            font-size: 18px;
            font-weight: 500;
        }

        /* 搜索栏 */
        .search-container {
            padding: 16px 16px 0;
            margin-top: 44px;
        }
        
        .search-box {
            display: flex;
            background: #fff;
            border-radius: 20px;
            padding: 8px 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            margin-bottom: 10px;
        }
        
        .search-input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 14px;
            background: transparent;
        }
        
        .search-icon {
            color: #999;
            margin-right: 8px;
        }
        
        .tag-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 10px;
        }
        
        .tag {
            background: #fff;
            border-radius: 16px;
            padding: 4px 12px;
            font-size: 12px;
            color: #666;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .tag.active {
            background: #007AFF;
            color: #fff;
        }

        /* 分类网格 */
        .category-grid {
            margin-top: 10px;
            padding: 16px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            margin-bottom: 60px;
        }

        .category-card {
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            position: relative;
        }

        .category-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .category-image {
            height: 120px;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            border-radius: 12px 12px 0 0;
            color: rgba(255, 255, 255, 0.9);
            position: relative;
            overflow: hidden;
        }
        
        .category-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.1);
            transform: translateX(-100%) skewX(-15deg);
            transition: all 0.5s ease;
        }
        
        .category-card:hover .category-image::before {
            transform: translateX(100%) skewX(-15deg);
        }

        .category-info {
            padding: 12px;
            position: relative;
            z-index: 1;
            background: #fff;
            border-radius: 0 0 12px 12px;
        }

        .category-name {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .category-count {
            font-size: 14px;
            color: #999;
            display: flex;
            align-items: center;
        }
        
        .category-count i {
            margin-right: 4px;
            font-size: 12px;
        }

        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 49px;
            background: #fff;
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #666;
            font-size: 12px;
            text-decoration: none;
        }

        .nav-item.active {
            color: #007AFF;
        }

        /* 分类详情页 */
        .category-detail {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 49px;
            background: #f5f5f5;
            z-index: 101;
            overflow-y: auto;
        }

        .category-detail.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }

        .detail-header {
            height: 44px;
            background: #fff;
            display: flex;
            align-items: center;
            padding: 0 16px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .back-button {
            font-size: 18px;
            margin-right: 16px;
            color: #007AFF;
        }

        .detail-title {
            font-size: 18px;
            font-weight: 500;
        }

        .detail-grid {
            padding: 16px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        .wallpaper-item {
            position: relative;
            aspect-ratio: 9/16;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }

        .wallpaper-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.15);
        }

        .wallpaper-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .wallpaper-item:hover img {
            transform: scale(1.05);
        }

        .wallpaper-actions {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
            padding: 30px 12px 12px;
            display: flex;
            justify-content: space-between;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.3s ease;
        }

        .wallpaper-item:hover .wallpaper-actions {
            opacity: 1;
            transform: translateY(0);
        }

        .action-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            backdrop-filter: blur(5px);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .action-btn:hover {
            background: rgba(255,255,255,0.3);
            transform: scale(1.1);
        }

        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .category-card {
            animation: fadeIn 0.5s ease;
        }

        .category-card:nth-child(odd) {
            animation-delay: 0.1s;
        }

        .category-card:nth-child(even) {
            animation-delay: 0.2s;
        }
    </style>
</head>
<body>
    <!-- 顶部标题栏 -->
    <div class="header">
        <h1>分类导航</h1>
    </div>
    
    <!-- 搜索和标签筛选 -->
    <div class="search-container">
        <div class="search-box">
            <i class="fas fa-search search-icon"></i>
            <input type="text" class="search-input" placeholder="搜索分类..." id="search-input">
        </div>
        <div class="tag-container">
            <div class="tag active" data-tag="all">全部</div>
            <div class="tag" data-tag="popular">热门</div>
            <div class="tag" data-tag="new">最新</div>
            <div class="tag" data-tag="nature">自然</div>
            <div class="tag" data-tag="abstract">抽象</div>
            <div class="tag" data-tag="technology">科技</div>
        </div>
    </div>

    <!-- 分类网格 -->
    <div class="category-grid">
        <div class="category-card" data-category="background" data-tags="popular,new">
            <div class="category-image">🌅</div>
            <div class="category-info">
                <div class="category-name">背景 <i class="fas fa-star" style="color: #FFD700; font-size: 12px;"></i></div>
                <div class="category-count"><i class="fas fa-image"></i> 128张壁纸</div>
            </div>
        </div>
        <div class="category-card" data-category="fashion" data-tags="popular">
            <div class="category-image">👔</div>
            <div class="category-info">
                <div class="category-name">时尚 <i class="fas fa-fire" style="color: #FF6B6B; font-size: 12px;"></i></div>
                <div class="category-count"><i class="fas fa-image"></i> 256张壁纸</div>
            </div>
        </div>
        <div class="category-card" data-category="nature" data-tags="popular,nature">
            <div class="category-image">🌲</div>
            <div class="category-info">
                <div class="category-name">自然</div>
                <div class="category-count"><i class="fas fa-image"></i> 384张壁纸</div>
            </div>
        </div>
        <div class="category-card" data-category="science" data-tags="technology">
            <div class="category-image">🔬</div>
            <div class="category-info">
                <div class="category-name">科学</div>
                <div class="category-count"><i class="fas fa-image"></i> 192张壁纸</div>
            </div>
        </div>
        <div class="category-card" data-category="education" data-tags="new">
            <div class="category-image">📚</div>
            <div class="category-info">
                <div class="category-name">教育</div>
                <div class="category-count"><i class="fas fa-image"></i> 160张壁纸</div>
            </div>
        </div>
        <div class="category-card" data-category="emotion" data-tags="popular">
            <div class="category-image">❤️</div>
            <div class="category-info">
                <div class="category-name">感情</div>
                <div class="category-count"><i class="fas fa-image"></i> 224张壁纸</div>
            </div>
        </div>
        <div class="category-card" data-category="health" data-tags="new">
            <div class="category-image">💪</div>
            <div class="category-info">
                <div class="category-name">健康</div>
                <div class="category-count"><i class="fas fa-image"></i> 176张壁纸</div>
            </div>
        </div>
        <div class="category-card" data-category="religion">
            <div class="category-image">⛪</div>
            <div class="category-info">
                <div class="category-name">宗教</div>
                <div class="category-count"><i class="fas fa-image"></i> 144张壁纸</div>
            </div>
        </div>
        <div class="category-card" data-category="places" data-tags="nature">
            <div class="category-image">🌍</div>
            <div class="category-info">
                <div class="category-name">地方</div>
                <div class="category-count"><i class="fas fa-image"></i> 288张壁纸</div>
            </div>
        </div>
        <div class="category-card" data-category="animals" data-tags="popular,nature">
            <div class="category-image">🐱</div>
            <div class="category-info">
                <div class="category-name">动物 <i class="fas fa-heart" style="color: #FF6B6B; font-size: 12px;"></i></div>
                <div class="category-count"><i class="fas fa-image"></i> 320张壁纸</div>
            </div>
        </div>
        <div class="category-card" data-category="industrial" data-tags="technology">
            <div class="category-image">🏭</div>
            <div class="category-info">
                <div class="category-name">工业</div>
                <div class="category-count"><i class="fas fa-image"></i> 208张壁纸</div>
            </div>
        </div>
        <div class="category-card" data-category="computer" data-tags="technology,new">
            <div class="category-image">💻</div>
            <div class="category-info">
                <div class="category-name">计算机 <i class="fas fa-bolt" style="color: #FFD700; font-size: 12px;"></i></div>
                <div class="category-count"><i class="fas fa-image"></i> 272张壁纸</div>
            </div>
        </div>
        <div class="category-card" data-category="food" data-tags="popular">
            <div class="category-image">🍔</div>
            <div class="category-info">
                <div class="category-name">食品</div>
                <div class="category-count"><i class="fas fa-image"></i> 240张壁纸</div>
            </div>
        </div>
        <div class="category-card" data-category="sports" data-tags="new">
            <div class="category-image">⚽</div>
            <div class="category-info">
                <div class="category-name">体育</div>
                <div class="category-count"><i class="fas fa-image"></i> 192张壁纸</div>
            </div>
        </div>
    </div>

    <!-- 分类详情页 -->
    <div class="category-detail">
        <div class="detail-header">
            <span class="back-button"><i class="fas fa-arrow-left"></i></span>
            <h2 class="detail-title">分类名称</h2>
        </div>
        <div class="search-container" style="margin-top: 10px;">
            <div class="tag-container">
                <div class="tag active" data-sort="newest">最新</div>
                <div class="tag" data-sort="popular">最热</div>
                <div class="tag" data-sort="random">随机</div>
            </div>
        </div>
        <div class="detail-grid">
            <!-- 壁纸项目将通过JavaScript动态添加 -->
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="index.html" class="nav-item">
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <span>分类</span>
        </a>
        <a href="video.html" class="nav-item">
            <span>视频</span>
        </a>
        <a href="my.html" class="nav-item">
            <span>我的</span>
        </a>
    </div>

    <script>
        // 获取DOM元素
        const categoryGrid = document.querySelector('.category-grid');
        const categoryDetail = document.querySelector('.category-detail');
        const detailTitle = document.querySelector('.detail-title');
        const backButton = document.querySelector('.back-button');
        const detailGrid = document.querySelector('.detail-grid');
        const searchInput = document.getElementById('search-input');
        const tags = document.querySelectorAll('.tag-container .tag');

        // 模拟壁纸数据
        const wallpapers = {
            background: Array(12).fill().map((_, i) => ({
                id: `bg-${i + 1}`,
                url: `https://picsum.photos/400/800?random=${i + 1}`,
                likes: Math.floor(Math.random() * 1000)
            })),
            // 为其他分类添加类似的数据
            fashion: Array(12).fill().map((_, i) => ({
                id: `fashion-${i + 1}`,
                url: `https://picsum.photos/400/800?random=${i + 20}`,
                likes: Math.floor(Math.random() * 1000)
            })),
            // 可以继续添加其他分类的数据
        };

        // 显示分类详情页面
        function showCategoryDetail(category) {
            detailTitle.textContent = category;
            categoryDetail.classList.add('active');
            loadWallpapers(category);
        }

        // 加载壁纸列表
        function loadWallpapers(category) {
            detailGrid.innerHTML = '';
            const categoryWallpapers = wallpapers[category.toLowerCase()] || wallpapers.background;

            categoryWallpapers.forEach(wallpaper => {
                const wallpaperItem = document.createElement('div');
                wallpaperItem.className = 'wallpaper-item';
                wallpaperItem.innerHTML = `
                    <img src="${wallpaper.url}" alt="壁纸">
                    <div class="wallpaper-actions">
                        <button class="action-btn"><i class="fas fa-heart"></i></button>
                        <button class="action-btn"><i class="fas fa-download"></i></button>
                    </div>
                `;
                detailGrid.appendChild(wallpaperItem);
            });
        }

        // 返回按钮点击事件
        backButton.addEventListener('click', () => {
            categoryDetail.classList.remove('active');
        });

        // 分类卡片点击事件
        categoryGrid.addEventListener('click', (e) => {
            const card = e.target.closest('.category-card');
            if (card) {
                const category = card.querySelector('.category-name').textContent.split(' ')[0];
                showCategoryDetail(category);
            }
        });

        // 搜索功能
        searchInput.addEventListener('input', (e) => {
            const searchTerm = e.target.value.toLowerCase();
            const cards = document.querySelectorAll('.category-card');
            
            cards.forEach(card => {
                const categoryName = card.querySelector('.category-name').textContent.toLowerCase();
                if (categoryName.includes(searchTerm)) {
                    card.style.display = '';
                } else {
                    card.style.display = 'none';
                }
            });
        });

        // 标签筛选功能
        tags.forEach(tag => {
            tag.addEventListener('click', () => {
                const selectedTag = tag.dataset.tag;
                tags.forEach(t => t.classList.remove('active'));
                tag.classList.add('active');

                const cards = document.querySelectorAll('.category-card');
                cards.forEach(card => {
                    if (selectedTag === 'all' || card.dataset.tags.includes(selectedTag)) {
                        card.style.display = '';
                    } else {
                        card.style.display = 'none';
                    }
                });
            });
        });
    </script>
</body>
</html>